<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p ref="test">msg:{{ msg }}</p>
      <p>getMsg:{{ getMsg }}</p>
      <input type="button" value="修改msg" @click="setMsg()" />
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          msg: "默认值",
        },
        computed: {
          getMsg() {
            console.log("======>msg发生变化", this.msg);
            return this.msg;
          },
        },
        methods: {
          setMsg() {
            this.msg = "固定前缀:" + 1; // 修改了仓库变量，值发生变量
            this.msg = "固定前缀:" + 22; // 修改了仓库变量，值发生变量
            this.msg = "固定前缀:" + 333; // 修改了仓库变量，值发生变量
            this.msg = "固定前缀:" + 4444; // 修改了仓库变量，值发生变量
            this.msg = "固定前缀:" + 55555; // 修改了仓库变量，值发生变量
            // 上述的修改对于页面的变化，用户是感觉不到的，vue为了优化程序渲染功能，延迟了页面更新
            // 修改了仓库变量，值发生变量，从页面上说，用户只能感觉到最后一次的操作
            this.msg = "固定前缀:" + 6;
            // 上面只是更新的数据，页面是否更新无法确认
            console.log("------->", this.$refs.test.innerHTML, this.msg);
            this.$nextTick(() => {
              // 执行的代码，一定是异步队列更新完成后执行
              console.log("*********>", this.$refs.test.innerHTML, this.msg);
            });
          },
        },
      });
      // vue在变量变化后，并不会立即更新页面，会以延迟的方式更新页面
      // 频繁的更新页面会导致浏览器页面出现大量的 回流和重绘，影响页面性能
      // 该种更新规则叫做“异步更新队列”：将连续的响应式数据变化进行操作缓存，
      //         当更新结束后，一次性完成统一的*单次*页面渲染
      // 异步更新队列产生的问题：在变量被修改后，无法直接获取到页面的最终更新元素

      // this.$nextTick: 将操作延迟到DOM更新之后
    </script>
  </body>
</html>
